<!-- 
  KeepAlive 多出的两个生命周期钩子函数

      1. activated
          1. 激活（能看到了）
          2. 默认会在组件创建完毕之后，触发一次。后续当组件重新可见时，再触发
          3. 应用场景与创建阶段或挂载阶段类似，做一些获取数据、全局事件监听、计时器

      2. deactivated
          1. 失活（被隐藏了）
          2. 当组件不可见时，触发一次
          3. 应用场景与卸载阶段类似，做收尾工作

  KeepAlive 的三个 prop

    1. include
      写在 include 下的才需要被缓存
    2. exclude
      卸载 exclude 下的需要排除缓存
    3. max
      控制最大可以缓存的实例数量

    include 与 exclude 的语法：
      1. 字符串语法，内容为组件的名字，通过 , 隔开多个组件
        include="a,b"
      2. 数组语法，每一项就是一个组件的名字
        :include="['a', 'b']"
      3. 正则语法
        :include="/^Page/"

      PS: 
        1. 组件的名字，需要使用在组件内配置的 name 选项的值
        2. 字符串语法时，逗号前后不能有空格
          "Home,About"

  KeepAlive 与 VueRouter@4 去使用时，需要调整玩法

 -->

<template>
  <div>
    <div class="demo">
      <button
        v-for="tab in tabs"
        :key="tab"
        :class="['tab-button', { active: currentTab === tab }]"
        @click="currentTab = tab"
      >
        {{ tab }}
      </button>

      <KeepAlive :max="2">
        <component :is="currentTab" />
      </KeepAlive>
    </div>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import About from './components/About.vue'
import Posts from './components/Posts.vue'

export default {
  components: {
    Home,
    About,
    Posts
  },

  data() {
    return {
      currentTab: 'Home',
      tabs: ['Home', 'About', 'Posts']
    }
  }
}
</script>

<style>
.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}

.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.tab {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>
